<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
</head>
<body>
<div id="header" class="wrap">
	<div id="logo">传习教育网上书城</div>
	<div id="navbar">
		<form method="post" name="search" action="${pageContext.request.contextPath}/book/product?method=search">
			搜索：<input class="input-text" type="text" name="keywords" />
			<input class="input-btn" type="submit" name="submit" value=""/>
		</form>
	</div>
</div>
<div id="login">
	<h2>用户登陆</h2>
<%
 //TODO cookie回显有没有更优雅点的方案
 String user="";
 String pwd="";
 Cookie [] cookies=request.getCookies();
 for(int i=0;null!=cookies&&i<cookies.length;i++){
	 Cookie cook= cookies[i];
	 if(cook.getName().equals("autologin")){
	  String val=cook.getValue();
	  String[]  us= val.split("-");
	  user = us[0].trim();
	  pwd = us[1].trim();
	 }
 }
%>
	<form method="post" action="${pageContext.request.contextPath}/book/user?method=login">
		<dl>
			<dt>用户名：</dt>
			<dd><input class="input-text" type="text" 
			onblur="checkuser(this.value)" 
			name="username" value="<%=user %>" />
			<span id="usTip"></span></dd>
			<dt>密　码：</dt>
			<dd><input class="input-text" onblur="checkPwd(this.value)"
			type="password" name="password" value="<%=pwd %>"/>
			<span id="pwdTip"> </span></dd>
			<dt></dt>
			<dt> 验证码：</dt>
			<dd>
			<input class="input-text" type="text"
			onblur="inputCode()" name="checkcode"  id="checkcode"/>
			<span id="mesTip">${msg}</span>
			<br/>
  	        <img src="${pageContext.request.contextPath}/imageServlet.do" alt="验证码" id="image" />
	        <a href="javascript:reload();"><label>换一张</label></a>
	        </dd>
	        <dt></dt>
	        <dd>
	          <input type="checkbox" name="autoLogin" value="604800"/>记录用户名和密码
	        </dd>
			<dd class="button">
			<input class="input-btn" type="submit" name="submit" value="" />
			<input class="input-reg" type="button" name="register" value=""
			 onclick="window.location='${pageContext.request.contextPath}/register.jsp';" /></dd>
		</dl>
	</form>
</div>

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript"> 
function checkPwd(pwd){
	if(pwd==""){
		$("#pwdTip").html("<font color=red>密码不能为空</font>");
	}else if(pwd.length<6){
		$("#pwdTip").html("<font color=red>密码不能少于6个字符</font>");
	}else{
		$("#pwdTip").html("<font color=green>√</font>");
	}
}
function checkuser(userName){
	if(userName==""){
		$("#usTip").html("<font color=red>用户名不能为空</font>");
	}else if(userName.length<3){
		$("#usTip").html("<font color=red>用户名不能少于3个字符</font>");
	}else{
		$("#usTip").html("<font color=green>√</font>");
	}
}
function inputCode(){
	$("#mesTip").html(""); 
}

function reload(){
 document.getElementById("image").src="${pageContext.request.contextPath}/imageServlet.do?date="+new Date().getTime();
 $("#checkcode").val("");   // 将验证码清空
} 
</script>
<div id="footer" class="wrap">
	传习教育网上书城 &copy; 版权所有
</div>
</body>
</html>